<template>
  <div class="home">
    <!-- 头部 -->
    <Row class="header" type="flex" justify="center">
      <Col span="15">
        <h1>{{projectName}}</h1>
      </Col>
    </Row>

    <!-- 简介 -->
    <Row class="introduction" type="flex" justify="center">
      <Col span="15">
        <h1>你好,{{welcome}},......</h1>
        <p>这是一个基于Vue和ViewUI的简单例子，ViewUI跟ElementUI的语法非常相似，容易上手，并且拥有更丰富的样式，灵活的参数配置，很容易就能搭建出漂亮的网站。</p>
        <Button type="primary">了解更多>></Button>
      </Col>
    </Row>

    <!-- 主体 -->
    <Row class="main" type="flex" justify="center">
      <Col span="15">
        <Row :gutter="10">
          <Col span="6" v-for="(title, index) in titles" :key="index">
            <Card class="card">
              <p slot="title">{{title}}</p>
              <p class="content">ViewUI很不错，很好用，非常好用，特别好用，一级棒，很香！......</p>
              <Button size="small">详情...</Button>
            </Card>
          </Col>
        </Row>
      </Col>
    </Row>

    <!-- 底部 -->
    <Row class="footer" type="flex" justify="center">
        <Col span="15">
            <Divider class="divider"/>
            <p>@ 2020 Company, Inc.</p>
        </Col>
    </Row>

    <!-- 动态加载组件 -->
    <component v-for="componentInfo in componentInfos" :key="componentInfo.name + Math.random()" :is="BaseModal" :componentInfo="componentInfo"></component>
  </div>
</template>

<script>
import BaseModal from "@/components/BaseModal.vue";

export default {
  data() {
    return {
      projectName: "ViewUI 演示项目",
      welcome: "Vue、ViewUI",
      titles: ["标题1", "标题2", "标题3", "标题4", "标题5", "标题6"],
      componentInfos: [],
      BaseModal
    };
  },
  // components: {
  //   BaseModal
  // },
  created() {
    let componentInfo = {
      name: "demo",
      url: "/demo/Demo"
    };
    this.componentInfos.push(componentInfo);
    this.componentInfos.push(componentInfo);
  },
};
</script>

<style scoped>
.home {
    width: 100%;
    height: 100%;
}
.header {
    height: 80px;
    line-height: 80px;
    background-color: #2b85e4;
    color: #ffffff;
}
.introduction {
    padding: 30px 0 30px 0;
}
.introduction h1,p {
    margin-bottom: 10px;
}
.main .card {
    background-color: #fbfbfb;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 1px 1px 1px 1px #cccccc;
}
.main .card:hover {
    box-shadow: 2px 2px 2px 2px #cccccc;
}
.main .content {
    margin-bottom: 5px;
}
.main button {
    width: 70px;
}
.divider {
    background-color: #bbbbbb;
}
</style>